// 访客列表
import '../../css/visitorList.css'
import * as XLSX from "xlsx";  // 导出文件
import { List, delAll, isgree, cascade, viexport } from "../../api/visitorList.js"; //接口
import { useNavigate } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { Table, Input, Pagination, Select, DatePicker, Button, Popconfirm, Cascader, message } from 'antd';
const { Option } = Select;
import type { ColumnsType } from 'antd/es/table' //ts类型


// ts定义规范
interface typeData {
  v_id: number,
  page: number,
  pageSize: number,
  username: string,
  mobile: string,
  departmentname: string,
  endtime: string,
  addtime: string,
  typename: string,
  status?: string,
  is_send?: string,
}


// 一共多少条
let total = 0;

const VisitorList = () => {

  let navgate = useNavigate() //跳转路由

  // 列表表头
  const columns: ColumnsType<typeData> = [
    {
      title: '用户名',
      dataIndex: 'username',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      align: 'center'
    },
    {
      title: '部门',
      dataIndex: 'departmentname',
      align: 'center'
    },
    {
      title: '进校时间',
      dataIndex: 'endtime',
      align: 'center'
    },
    {
      title: '离校时间',
      dataIndex: 'addtime',
      align: 'center'
    },
    {
      title: '人员类型',
      dataIndex: 'typename',
      align: 'center'
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      render: (text: number) => (
        text === 0 ? <Button className='aa'>已取消</Button> : <Button className='cc'></Button> &&
          text === 2 ? <Button className='bb'>待二审</Button> : <Button className='cc'></Button> &&
            text === 3 ? <Button className='dd'>终审通过</Button> : <Button className='ee'>待初审</Button>
      )
    },
    {
      title: '是否离校',
      align: 'center',
      dataIndex: 'is_send',
      render: (text: number) => (text == 2 ? '否' : '是')
    },
    {
      title: '操作',
      align: 'center',
      dataIndex: 'status',
      render: (text: number, record: any) => ( //text状态 record类型
        text == 3 ?
          <div>
            <Button type='dashed' disabled id='status'>已审核</Button>
            <Button type='primary' className='dea' onClick={() => particulars2(record.v_id)} >详情</Button>
          </div> : <div>
            <Popconfirm
              title="审核?"
              onConfirm={() => confirm(record.v_id)}
              okText="通过"
              cancelText="拒绝"
            >
              <Button type='primary' id='statu'>审核</Button>
            </Popconfirm><Button type='primary' className='dea' onClick={() => particulars(record.v_id)}>详情</Button>
          </div>)
    },
  ];

  // 点击审核
  let confirm = async (id: number) => {
    console.log(id);
    let res: any = await isgree({ v_id: id })
    console.log(res);
    if (res.code === '00000') {
      message.success('审核通过', 2)
    }
    list() //刷新数据
  }

  // 批量审核
  let batchAudit = async (id: number) => {
    console.log(id);
    let res: any = await isgree({ v_id: id })
    console.log(res);
    if (res.code === '00000') {
      message.success('审核通过', 2)
    }
    list() //刷新数据
  }

  // 没审核时的详情
  let particulars = (id: number) => {
    console.log(id);
    navgate('/index/Particulars?id=' + id)
  }

  // 审核通过时的详情
  let particulars2 = (id: number) => {
    console.log(id);
    navgate('/index/Particulars?id=' + id)
  }


  // 列表数据
  const [params, setparams]: any = useState({ page: 1, pageSize: 5, idorname: '', mobile: '', typename: '', status: '', starttime: '', endtime: '', v_id: null, department: '' }) //列表需要的参数
  const [lists, uselist]: any = useState([]) //列表数据

  const [page, usepage]: any = useState([]) //分页数据

  let list = async () => { //调列表接口
    let res: any = await List(params)
    console.log(res);
    uselist(res.data) //列表赋值
    usepage(res.current_page) //分页赋值
    total = res.total         //一共多少条
  }

  // 点击分页
  let pachange = (page: number, pageSize: number) => {
    // console.log(page, pageSize);
    setparams({ ...params, page: page, pageSize: pageSize })
  }


  useEffect(() => {
    list() //掉接口
  }, [params])


  // 访客名称
  const [name, setname]: any = useState({ name: '' })
  let visitname = (value: any) => {
    setname({
      ...name, name: value.target.value
    })
  }

  // 手机号
  const [cellPhone, setcellPhone]: any = useState({ cellPhone: '' })
  let cell_phone = (value: any) => {
    // console.log(value);
    setcellPhone({
      ...cellPhone, cellPhone: value.target.value
    })
  }

  // 选择人员类型
  let onGenderChange = (value: any) => {
    console.log(value);
    setparams({
      ...params, typename: value
    })
  }

  // 是否离校

  let onGenderChange2 = (value: any) => {
    console.log(value);
  }

  // 请选择审核状态
  let onGenderChange3 = (value: any) => {
    // console.log(value);
    setparams({
      ...params, status: value //审核状态
    })
  }


  // 三级联动 // 请选择部门
  const fieldNames = { label: 'name', value: 'id', children: 'son' }

  const [options, setOptions]: any = useState([])

  // 掉接口
  let getcascade = async () => {
    let res = await cascade()
    console.log(res);
    setOptions(res.data)
  }

  let onGenderChange4 = (value: any) => {
    console.log(value);
    // options.department = options.department[options.department.length - 1] //截取到级联框最后一个值
    setparams({
      ...params, department: [value.length - 1]
    })
    console.log(params);

  }

  useEffect(() => {
    getcascade()
  }, [])

  // 选择时间
  const [end, settime] = useState({
    starttime: '', //进校时间
    endtime: '' //出校时间
  })
  let onChange = (value: any, dateString: any) => {
    console.log(value);
    settime({
      ...end,
      starttime: dateString,
      endtime: dateString
    })
  }

  // 点击查询
  let inquire = () => {
    setparams({
      ...params,
      idorname: name.name, //姓名
      mobile: cellPhone.cellPhone,//手机号
      starttime: end.starttime,//进校时间
      endtime: end.endtime,//出校时间
    })
  }

  // 批删--首先先要获取多选框的数据  //批量审核
  const [batch, setbatch]: any = useState([])
  // 点击批删
  let batchRemove = async (id: any) => {
    // console.log(id);
    let res = await delAll({ v_id: id })
    console.log(res);
    list() //重新刷新数据
  }

  // 跳转添加页面
  let add = () => {
    navgate('/index/VisitorAdd')
  }


  // 导出接口
  const [getxlsx, setxlsx]: any = useState({ getxlsx2: '' })
  let getviexport = async () => {
    let res: any = await viexport(lists)
    console.log(res);
    setxlsx({
      ...getxlsx, getxlsx2: res.file
    })
  }

  useEffect(() => {
    getviexport()
  }, [])

  //点击导出
  let exporttt = () => {
    // console.log(getxlsx.getxlsx2);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = getxlsx.getxlsx2;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }



  // 左边多选框
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setbatch(selectedRowKeys)
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');


  return (<div className='vistitlist'>

    {/* 头部表单 */}
    <div className='form'>

      <div className='form2'>
        <div className='input1'>
          <Input placeholder="访客名称" value={name.name} onChange={visitname} />
        </div>

        <div className='input2'>
          <Input placeholder="手机号" value={cellPhone.cellPhone} onChange={cell_phone} />
        </div>

        <div>
          <Select
            placeholder="请选择人员类型"
            onChange={onGenderChange}
            allowClear
            className='select1'
          >
            <Option value="外来人员">外来人员</Option>
            <Option value="老师">老师</Option>
            <Option value="学生">学生</Option>
          </Select>
        </div>

        <div>
          <Select
            placeholder="是否离校"
            onChange={onGenderChange2}
            allowClear
            className='select1'
          >
            <Option value="已离校">已离校</Option>
            <Option value="未离校">未离校</Option>
          </Select>
        </div>

        <div>
          <Select
            placeholder="请选择审核状态"
            onChange={onGenderChange3}
            allowClear
            className='select1'
          >
            <Option value="0">已取消</Option>
            <Option value="1">待初审</Option>
            <Option value="初审拒绝">初审拒绝</Option>
            <Option value="2">待二审</Option>
            <Option value="二审拒绝">二审拒绝</Option>
            <Option value="3">待终审</Option>
            <Option value="终审通过">终审通过</Option>
            <Option value="终审拒绝">终审拒绝</Option>
          </Select>
        </div>

        <div>
          <Cascader placeholder="请选择部门" className='select1' fieldNames={fieldNames} options={options}
            onChange={onGenderChange4} />
        </div>
      </div>

      <div className='form3'>
        <div>
          <DatePicker showTime onChange={onChange} className='select1' />

        </div>
        <div>
          <DatePicker showTime onChange={onChange} className='select1' />
        </div>

        <Button type="primary" id='sel' className='Button1' onClick={inquire}>查询</Button>
        <Button type="primary" id='add' className='Button2' onClick={add}>添加</Button>
        <Button type="primary" id='ss' className='Button3' onClick={() => batchAudit(batch)}>批量审核</Button>
        <Button type="primary" id='dd' className='Button4' onClick={exporttt}>批量导出</Button>
        <Button type="primary" id='ss' className='Button5'>批量导入</Button>
        <Button type="primary" id='add' className='Button6' onClick={() => batchRemove(batch)}>批量删除</Button>

      </div>

    </div>

    {/* 表格 */}
    <div className='table' >
      <Table rowKey='v_id' rowSelection={{
        type: selectionType,
        ...rowSelection,
      }} columns={columns} dataSource={lists} bordered pagination={false} />
    </div>

    {/* 分页 */}
    <Pagination
      current={page} total={total}
      showTotal={total => `总共 ${total} 条数据`}
      defaultPageSize={5}
      defaultCurrent={1}
      onChange={pachange}
      className='page'
    />

  </div>);

}

export default VisitorList;